<template>
    <div style="backgroundcolor: rgb(245, 245, 245); color: #222" :style="{ width: operatePanelWidth }">
        <div class="risk-bound-cfg">
            <span style="width: 75px; line-height: 28px"> 范围属性： </span>
            <el-select
                name="范围属性"
                v-model="investGroupTypeReal"
                size="mini"
                :disabled="investGroupTypeDisabled"
                @change="handleInvestGroupTypeReal"
            >
                <el-option
                    v-for="item in boundType"
                    :value="item.dictKey"
                    :key="item.dictKey"
                    :label="item.dictKey + ' ' + item.dictKeyName"
                ></el-option>
            </el-select>
            <RiskCustomSelect
                :selectKeys="category"
                :dataSource="categorys"
                showSelectAll="true"
                showSearch="false"
                style="margin-left: 5px"
                @customSelectReturn="categorySelectReturn"
                :style="{ display: investGroupTypeReal === '3' && showCategory ? '' : 'none' }"
            ></RiskCustomSelect>
        </div>
        <div class="risk-bound-tree" :style="{ height: operatePanelHeight }" style="minheight: 191px">
            <div style="">
                <el-row :gutter="10" style="margin-top: 6px">
                    <!-- sql拼接符 -->
                    <el-col :span="4">
                        <el-select v-model="sqlSpliceType" placeholder="请选择" size="mini" @change="handleSqlSpliceType">
                            <el-option v-for="(value, key) in conditionRelation" :key="key" :label="key + ' ' + value" :value="key + ' ' + value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <!--证券范围-->
                    <el-col :span="6">
                        <el-select
                            name="证券范围"
                            v-model="fundDynamicGroupBounds.boundCode"
                            placeholder="证券范围"
                            size="mini"
                            filterable
                            @change="handleOriginalBoundConfig"
                        >
                            <el-option value="-1" label=" " key="-1"></el-option>
                            <el-option
                                v-for="item in originList"
                                :key="item.boundCode"
                                :label="item.boundCode + '' + item.boundName"
                                :value="item.boundCode"
                                :name="'bound' + item.boundCode"
                            >
                            </el-option>
                        </el-select>
                    </el-col>

                    <!-- 比较方向 -->
                    <el-col :span="spliceMethods.includes('1') || spliceMethods.includes('2') || spliceMethods.includes('3') ? 3 : 4">
                        <el-select
                            name="比较方向"
                            v-model="fundDynamicGroupBounds.compareType"
                            placeholder="比较方向"
                            size="mini"
                            :disabled="fundDynamicGroupBounds.separateValid"
                        >
                            <el-option
                                v-for="value in compareTypes"
                                :key="value"
                                :label="value + '  ' + CompareDirection[value]"
                                :value="value"
                                :name="'compareType' + value"
                            >
                            </el-option>
                        </el-select>
                    </el-col>

                    <!-- 下拉多选框 -->
                    <el-col :span="spliceMethods.includes('1') || spliceMethods.includes('2') || spliceMethods.includes('3') ? 4 : 5">
                        <div v-show="webShowType === '0'">
                            <RiskCustomSelect
                                name="下拉多选框"
                                :selectKeys="fundDynamicGroupBounds.boundValues"
                                :dataSource="dictsTempFilter"
                                showSearch="true"
                                @customSelectReturn="customSelectReturn"
                                :key="dictsTempFilterNumKey + 'dictsTempFilterNumKey'"
                            ></RiskCustomSelect>
                        </div>
                        <!-- 计数器-整数 -->
                        <yh-input-number
                            name="计数器-整数"
                            v-model="form.boundValueNum"
                            controls-position="right"
                            @change="handleBoundValueChange15"
                            v-if="webShowType === '1'"
                            size="mini"
                        ></yh-input-number>
                        <!-- 大数据穿梭框 -->
                        <div v-show="webShowType === '2' && !fundDynamicGroupBounds.separateValid" style="display: flex">
                            <el-input
                                name="大数据穿梭框"
                                disabled
                                style="width: 80px"
                                size="mini"
                                placeholder=""
                                v-model="transValuesShow"
                            ></el-input>
                            <el-button
                                name="大数据穿梭框按钮"
                                type="primary"
                                icon="el-icon-search"
                                size="mini"
                                @click="selectKeyValue2Click"
                                style="margin-left: 2px"
                            >
                            </el-button>
                        </div>
                        <!-- 日期 -->
                        <el-date-picker
                            name="日期时间"
                            v-model="boundValueDate"
                            type="date"
                            placeholder="选择日期时间"
                            size="mini"
                            value-format="yyyyMMdd"
                            format="yyyyMMdd"
                            v-show="webShowType === '3'"
                            style="width: 130px"
                        >
                            <!-- @change="handleBoundValueChange3" -->
                        </el-date-picker>
                        <!-- 单选框 -->
                        <el-select
                            name="下拉单选"
                            v-model="boundValueSelect"
                            v-show="webShowType === '4'"
                            @change="handleBoundValueChange4"
                            size="mini"
                        >
                            <el-option
                                v-for="item in dictsTemp"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item.dictKey"
                                :name="'boundValue' + item.dictKey"
                            >
                            </el-option>
                        </el-select>
                        <!-- 计数器-小数 -->
                        <yh-input-number
                            name="计数器-小数"
                            v-model="form.boundValueNum"
                            controls-position="right"
                            :step="1"
                            :precision="6"
                            :max="10000000000000"
                            @change="handleBoundValueChange15"
                            v-if="webShowType === '5'"
                            size="mini"
                        ></yh-input-number>
                    </el-col>
                    <el-col :span="3">
                        <el-checkbox
                            name="单独控制"
                            v-model="fundDynamicGroupBounds.separateValid"
                            :disabled="!currentConfigSeparateValid"
                            v-show="!notShowSingleControl"
                            @change="handleSeparateValidCheck"
                            style="padding: 5px"
                            >单独控制</el-checkbox
                        >
                    </el-col>
                    <!-- <el-col :span="2" v-if="!spliceMethods.includes('1')">
                        <el-button
                            icon="el-icon-circle-plus-outline"
                            type="primary"
                            style="margin-right: 5px"
                            @click="handleAddConfig"
                            size="mini"
                            title="添加"
                        ></el-button>
                    </el-col> -->
                    <el-col
                        :span="4"
                        class="search-wrap"
                        v-show="
                            (spliceMethods.includes('1') ||
                                spliceMethods.includes('2') ||
                                spliceMethods.includes('3') ||
                                spliceMethods.includes('4')) &&
                            !disabledSpliceMethods
                        "
                    >
                        <el-select v-model="fundDynamicGroupBounds.spliceMethod" placeholder="请选择控制维度" size="mini">
                            <el-option
                                v-for="(value, key) in controlTypeOptions"
                                :key="key"
                                :value="key"
                                :label="value"
                                v-show="spliceMethods.includes(key)"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </div>
            <div class="risk-bound-tree-show">
                <el-row style="height: 100%">
                    <el-col
                        :span="22"
                        style="height: 100%; padding: 6px; background-color: white; border: 1px solid #ccc; border-radius: 5px; overflow: auto"
                    >
                        <div :style="{ display: isVerifyStockBoundonfig ? 'none' : '' }">
                            <el-tree
                                ref="tree"
                                id="tree"
                                :data="originalRenderTree"
                                :props="defaultProps"
                                @node-click="handleBoundNodeClick"
                                :expand-on-click-node="false"
                                node-key="configId"
                                :current-node-key="currentConfigId"
                                :default-expand-all="true"
                            >
                                <!-- :check-on-click-node="true" -->
                                <span class="custom-tree-node" slot-scope="{ node, data }">
                                    <span :name="node.label">{{ node.label }}</span>
                                    <i
                                        :class="'boundExtend' + data.boundCode"
                                        class="el-icon-setting"
                                        style="font-size: 20px; color: orange; margin-left: 3px"
                                        :style="{ display: data.showBoundExtend ? '' : 'none' }"
                                        @click.stop="handeBoundExtend(data)"
                                    >
                                    </i>
                                    <ItemBoundExtendModel
                                        :showModal="showBoundExtendModel"
                                        :selectWebSqlValues="selectWebSqlValues5"
                                        :boundConfigExtends="boundConfigExtends"
                                        :record="FiveData"
                                        :resolveKey="resolveKey"
                                        @handleBoundExtendModel="handleBoundExtendModel"
                                        v-if="showBoundExtendModel"
                                    ></ItemBoundExtendModel>
                                </span>
                            </el-tree>
                        </div>
                        <div :style="{ display: !isVerifyStockBoundonfig ? 'none' : '' }" style="height: 100%">
                            <el-button type="primary" size="mini" style="margin: 5px" @click="handleClick">搜索</el-button>
                            <el-table
                                :data="stockSearchDataSource"
                                v-loading="stockSearchLoading"
                                style="width: 100%"
                                height="calc(100% - 78px)"
                                size="mini"
                                border
                            >
                                <el-table-column prop="stockCode" label="证券代码" width="150" show-overflow-tooltip> </el-table-column>
                                <el-table-column prop="stockNameSt" label="证券名称" show-overflow-tooltip> </el-table-column>
                                <el-table-column prop="stockType" label="证券类型" width="150" show-overflow-tooltip>
                                    <template #default="{ row }">
                                        {{ StockTypePojo[row.stockType] }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="marketCode" label="市场类型" show-overflow-tooltip>
                                    <template #default="{ row }">
                                        {{ MarketTypePojo[row.marketCode] }}
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                background
                                @current-change="handleCurrentChange"
                                layout="total, prev, pager, next"
                                :current-page="paging.currentPage"
                                :page-size="paging.pageSize"
                                :total="paging.total"
                            >
                            </el-pagination>
                        </div>
                    </el-col>
                    <el-col :span="2" style="display: flex; flex-direction: column; align-items: center">
                        <el-button
                            name="boundAdd"
                            icon="el-icon-circle-plus-outline"
                            type="primary"
                            @click="handleAddConfig"
                            size="mini"
                            title="添加"
                        ></el-button>
                        <!--   v-show="spliceMethods.includes('1')" -->
                        <el-button
                            name="boundEdit"
                            icon="el-icon-check"
                            size="mini"
                            type="primary"
                            title="编辑"
                            @click="handleUpdateConfig"
                            style="margin: 5px 0px"
                        />
                        <el-button name="boundDel" icon="el-icon-minus" size="mini" type="danger" title="删除配置" @click="handleDeleteConfig" />
                        <!-- <div :style="{ display: investGroupTypeReal === '3' ? '' : 'none' }"> -->
                        <!-- <el-button type="primary" icon="el-icon-warning-outline" title="校验配置" size="mini" style="margin: 5px 0" /> -->
                        <!-- 该功能暂时没有启用 -->
                        <!-- @click="handleCheckConfig" -->
                        <!-- </div> -->
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 穿梭框 -->
        <div>
            <yh-dialog :visible.sync="editLargeDataDialog.visible" width="800px" v-loading="loading" append-to-body class="editDialog" drag>
                <div style="height: fit-content">
                    <RiskSettingInline
                        :boundCode="fundDynamicGroupBounds.boundCode"
                        ref="trans"
                        url="/original/showBigData"
                        index-key="dictKey"
                        left-placeholder="编号/名称"
                        right-placeholder="编号/名称"
                        :columns="tranColumns"
                        :right-table-data="rightTranData"
                        :search-names="['dictKey', 'dictKeyName']"
                        :key="transKey + 'transKey'"
                    />
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button name="取消" size="mini" @click="editLargeDataDialog.visible = false"> 取 消 </el-button>
                    <el-button name="transConfirm" size="mini" type="primary" @click="editLargeDataDialogConfirm">确 定 </el-button>
                </div>
            </yh-dialog>
            <!--<yh-dialog drag :visible.sync="editLargeDataDialog.visible" width="800px" v-loading="loading" append-to-body>
                <div style="height: fit-content">
                    <RiskTrantable
                        leftPlaceholder="编号/名称"
                        rightPlaceholder="编号/名称"
                        :leftColumns="tranColumns"
                        :rightColumns="tranColumns"
                        :leftTableData="leftTranData"
                        :rightTableData="rightTranData"
                        :leftSearchNames="['dictKey', 'dictKeyName']"
                        indexKey="dictKey"
                        ref="tranTable"
                        sort="dictKeyName"
                    />
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="editLargeDataDialogClosed"> 取 消 </el-button>
                    <el-button size="mini" type="primary" @click="editLargeDataDialogConfirm">确 定 </el-button>
                </div>
           </yh-dialog> -->
        </div>
    </div>
</template>

<script lang="ts">
import RiskCustomSelect from '@/common/components/risk-custom-select.vue';
import RiskTrantable from '@/common/components/risk-trantable.vue';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import { UUID } from '@/utils/tools';
import { DialogVO } from '@yhfin/biz';
import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';
import XEUtils from 'xe-utils';
import Dict from '../dict/index';
import ItemBoundExtendModel from './item-bound-extend-model.vue';
import RiskSettingInline from '@/common/components/risk-setting-inline.vue';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

export interface dynamicDataReqVO {
    dynamicCode?: string; //
    boundCode?: string;
    boundValues?: any[];
    compareType?: string; // 比较方向
    boundValueNames?: any[]; //
    boundGroupValid?: boolean; // 是否是组配置
    parentId?: number;
    configId?: number;
    separateValid?: boolean; // 是否同申报
    sqlSpliceType?: string; // sql拼接符
    groupType?: string; // 范围配置组控制类型
    spliceMethod?: string;
}

@Component({
    name: 'BoundCfg0',
    components: {
        RiskTrantable,
        ItemBoundExtendModel,
        RiskCustomSelect,
        RiskSettingInline,
    },
})
/**
 *
 * 组件属性：
 * stockBound：范围配置集合
 * operate：操作类型 新增/查看/编辑
 * investGroupType：范围属性 必须
 * settingValue：回调函数 设置后的值
 * investGroupTypeDisabled:范围属性是否禁用
 * notShowSingleControl:单独控制单选框是否显示
 * startParentId: 开始父节点id值
 */
export default class BoundCfg0 extends Vue {
    @Prop({ required: true }) stockBound: any;
    @Prop() operate: string;
    @Prop() investGroupType: string;
    @Prop({ default: true }) investGroupTypeDisabled: boolean;
    @Prop({ default: true }) notShowSingleControl: boolean;
    @Prop() operatePanelHeight?: string;
    @Prop({ default: '100% ' }) operatePanelWidth: string;
    @Prop({ default: true }) showCategory: boolean;
    @Prop({ default: 0 }) startParentId: number;
    @Prop({ default: false }) disabledSpliceMethods: boolean;
    resolveKey: string = '';

    @Emit('onHandleOperateOver')
    private settingValue(value) {
        return value;
    }

    async created() {
        this.investGroupTypeReal = this.investGroupType || '3';
        this.configId = this.startParentId == 2 ? 4 : 1;
        await this.handleInvestGroupTypeReal();
        this.categorys = await DictionConstUtil.FNCateGory();
    }

    // @Watch('configId')
    // handle(oldValue, newValue) {
    //     console.log(oldValue, newValue);
    //     console.log('改变了', this.configId);
    // }

    investGroupTypeReal: string = '3'; // 实际范围类型

    private originList: any = []; // 当前范围配置组信息

    boundList: any = []; // 全部配置信息

    private originalConfigList: any = []; // 配置数据集合(传值或者提交数据)

    private currentConfigId: any = null; // 当前选中树节点

    private allParentTreeNodes: any = []; // 所有的父级节点 便于全部展开

    private currentOpenTreeNode: any[] = []; // 当前展开的节点

    private originalRenderTree: any[] = []; // 渲染树形结构数据

    private category: any[] = ['-1']; // 资产分类显示值

    private isVerifyStockBoundonfig: boolean = false; // 是否校验配置

    private webShowType: string = '5'; // 输入框类型(默认为5)

    private compareTypes: any[] = []; // 比较方向

    private currentConfigSeparateValid: boolean = false; // 单独控制单选框是否禁用

    private editLargeDataDialog: DialogVO = new DialogVO(); // 大数据弹框

    // private boundValueShow: string = ''; // 多选框所选值回显

    private dicts: any[] = []; // 多选框选项

    private dictsTemp: any[] = []; // 多选框临时选项

    private dictsTempFilter: any[] = []; // 多选框临时选项

    private dictsTempFilterNumKey: number = -1;

    private transValuesShow: string = ''; // 穿梭框显示值

    private boundValueDate: string = ''; // 日期选择器绑定值

    private boundValueSelect: string = ''; // 单选框绑定值

    // private boundValueSearchInput: string = ''; // 多选框搜索输入值

    private sqlSpliceType: string = '0 并且'; // sql拼接字符串

    private leftTranData: any[] = []; // 穿梭框左侧值

    private rightTranData: any[] = []; // 穿梭框右侧值
    transKey: number = -1;

    controlTypeOptions: any = {
        '0': '按证券代码控制',
        '1': '按产品代码控制',
        '2': '按冻结代码控制',
        '3': '按配售代码控制',
        '4': '按穿透代码控制',
    };
    spliceMethods: any[] = []; // 当前范围指标的范围类型

    // 穿梭框表格格式
    private tranColumns: any[] = [
        {
            label: '编号',
            prop: 'dictKey',
            width: 80,
        },
        {
            label: '名称',
            prop: 'dictKeyName',
            width: 165,
        },
    ];

    private parentId: number = 0;

    private configId: number = 1;

    private operateType: string = 'edit';

    private showBoundExtend: boolean = false; // 是否展示第五类图标

    private showBoundExtendModel: boolean = false; // 是否打开第五类弹框

    private currentBoundExtend: any = {}; // 第五类当前节点数据

    Dict: any = new Dict(); // 字段

    private boundType: any[] = DictionConstUtil.PojoToList(this.Dict.boundType); // 范围属性组

    private categorys: any[] = []; // 资产分类组

    private CompareDirection: any = this.Dict.CompareDirection; // 比较方向

    private conditionRelation: any = this.Dict.conditionRelation; // sql拼接字段符转义

    // private renderValueType: any; //渲染Key

    // 计数器输入框绑定值
    private form = {
        boundValueNum: undefined,
    };

    // 操作框对象
    private fundDynamicGroupBounds: dynamicDataReqVO = {
        dynamicCode: '',
        boundCode: '-1',
        boundValues: [],
        compareType: '', // 比较方向
        boundValueNames: [],
        boundGroupValid: true,
        parentId: 0,
        configId: 0,
        separateValid: false, // 是否同申报
        sqlSpliceType: '0', // sql拼接符
        groupType: '3', // 范围配置组控制类型
        spliceMethod: '0',
    };

    private fundDynamicGroupBoundsBackup: dynamicDataReqVO = {
        // 证券范围配置项
        dynamicCode: '',
        boundCode: '-1',
        boundValues: [],
        compareType: '', // 比较方向
        boundValueNames: [], //
        boundGroupValid: true,
        parentId: 0,
        configId: 0,
        separateValid: false, // 是否同申报
        spliceMethod: '0',
        sqlSpliceType: '0', // sql拼接符
        groupType: '3', // 范围配置组控制类型
    };

    defaultProps = {
        children: 'children',
        label: 'label',
    };

    FiveData: any = {}; // 点击的第五类数据

    @Watch('stockBound', { immediate: true, deep: true })
    async watchStockBound() {
        this.boundList = await DictionConstUtil.FNBoundCfg();

        // 配置数据集合
        this.originalConfigList = JSON.parse(JSON.stringify(this.stockBound || []));

        // 处理操作类型
        this.operateBoundCfg(this.operateType, this.originalConfigList);

        this.onHandleSettingValue(this.originalConfigList); //

        // 设置值
        this.fundDynamicGroupBounds.groupType = this.investGroupTypeReal || '3';

        this.sqlSpliceType = this.fundDynamicGroupBounds.sqlSpliceType + ' ' + this.Dict.conditionRelation[this.fundDynamicGroupBounds.sqlSpliceType];
    }

    @Watch('dictsTemp', { deep: true })
    onWatchDictsTempList(value) {
        let dictsTemp = value;
        if (this.category[0] === '-1' || !this.category.length) {
            this.dictsTempFilter = dictsTemp;
            this.$set(this, 'dictsTempFilter', JSON.parse(JSON.stringify(dictsTemp)));
        } else {
            let result = [];
            result = dictsTemp.filter(item => {
                if (item.param1.includes('-1')) {
                    return true;
                } else {
                    return !!item.param1.find(it => this.category.includes(it));
                }
            });
            this.$set(this, 'dictsTempFilter', JSON.parse(JSON.stringify(result)));
        }
        this.dictsTempFilterNumKey++;
    }

    @Watch('category', { deep: true })
    onWatchCategoryList(value) {
        let category = value;
        if (category[0] === '-1' || !category.length) {
            this.$set(this, 'dictsTempFilter', JSON.parse(JSON.stringify(this.dictsTemp)));
        } else {
            let result = [];
            result = this.dictsTemp.filter(item => {
                if (item.param1.includes('-1')) {
                    return true;
                } else {
                    return !!item.param1.find(it => category.includes(it));
                }
            });
            this.$set(this, 'dictsTempFilter', JSON.parse(JSON.stringify(result)));
        }
        this.dictsTempFilterNumKey++;
    }

    // 范围类型改变
    // @Watch('investGroupTypeReal', { deep: true, immediate: true })
    async handleInvestGroupTypeReal() {
        this.originList = await DictionConstUtil.FNBoundCfgByBoundType(this.investGroupTypeReal);
        this.fundDynamicGroupBounds.groupType = this.investGroupTypeReal || '3';

        this.sqlSpliceType = '0 并且';
        this.handleSqlSpliceType(this.sqlSpliceType);

        this.handleOriginalBoundConfig('-1');
    }

    // 传来的操作状态;
    private operateBoundCfg(operateType: string, stockBound: any): void {
        if (operateType === 'look' || operateType === 'edit') {
            let configId = 0;
            for (let i = 0; i < stockBound.length; i++) {
                if (stockBound[i].boundGroupValid) {
                    stockBound[i].compareType = '';
                    stockBound[i].boundCode = '-1';
                }
                let id = stockBound[i].configId;
                if (configId < id) {
                    // 获得最大的configId
                    configId = stockBound[i].configId;
                }
            }
            if (this.configId <= configId) {
                this.configId = ++configId;
            }

            // 节点渲染 默认展开所有的节点
            this.allParentTreeNodes = [];
            this.originalRenderTree = this.handleRenderTree(stockBound);

            this.currentOpenTreeNode = this.allParentTreeNodes;
        }
    }

    // 证券范围下拉列表框改变时 触发该事件(-1相当于清空)
    // @Watch('fundDynamicGroupBounds.boudCode')
    handleOriginalBoundConfig(val: string): void {
        console.log(this.fundDynamicGroupBounds, 'fundDynamicGroupBounds');

        this.fundDynamicGroupBounds = {
            ...this.fundDynamicGroupBounds, //
            dynamicCode: '',
            separateValid: false,
            spliceMethod: '0',
            groupType: this.investGroupTypeReal,
            boundCode: val,
            compareType: '',
            boundValues: [],
            boundValueNames: [],
            boundGroupValid: true,
        };

        this.clearBoundFormColumn(this.webShowType);

        this.currentConfigSeparateValid = false; // 当前范围是否支持同申报

        if (val === '-1') {
            this.webShowType = '';
            this.compareTypes = [];
            this.spliceMethods = [];
        } else {
            this.fundDynamicGroupBounds.boundGroupValid = false;
            this.originList.forEach(element => {
                if (element.boundCode === val) {
                    this.compareTypes = element.webDirections;
                    this.webShowType = element.webShowType;
                    this.currentConfigSeparateValid = element.separateValid; // 当前范围是否支持同申报
                    if (this.webShowType === '0') {
                        // 多选
                        this.handleShowWebShow(val);
                    } else if (this.webShowType === '4') {
                        // 单选
                        this.handleShowWebShow(val);
                    }
                    this.spliceMethods = element.spliceMethods;
                    console.log(this.spliceMethods, 'spliceMethods');
                }
            });
        }
    }

    //  根据证券范围配置编号获取 展示SQL
    private handleShowWebShow(boundCode) {
        if (boundCode === '-1') {
            return;
        }
        this.dicts = [];
        return new Promise(resolve => {
            this.$axios.get('/original/showSelect/' + boundCode).then(
                (res: any) => {
                    if (res) {
                        this.dicts = res;
                        this.dictsTemp = this.dicts;
                        resolve('success');
                    }
                },
                () => {
                    this.dicts = [];
                    this.dictsTemp = [];
                    resolve('fail');
                }
            );
        });
    }

    // 将范围属性表单字段置空
    private clearBoundFormColumn(webShowType: string) {
        if (webShowType === '1' || webShowType === '5') {
            this.form.boundValueNum = undefined;
        } else if (this.webShowType == '2') {
            this.transValuesShow = '';
            this.rightTranData = [];
        } else if (webShowType === '4') {
            this.boundValueSelect = '';
        } else if (webShowType === '3') {
            this.boundValueDate = '';
        }
    }

    // 资产分类下拉框返回值
    private categorySelectReturn(keys: any): void {
        this.$set(this, 'category', keys);
    }

    // // 触发下拉框 webShowType === '0'
    // private showTypeFocusEvent(): void {
    //     this.boundValueSearchInput = '';
    //     this.dictsTemp = this.dicts;
    //     (this.$refs as any).showTypeDown.showPanel();
    // }

    // // 范围配置下拉框搜索
    // private boundValueSearch(): void {
    //     this.dictsTemp =
    //         this.boundValueSearchInput !== ''
    //             ? this.dicts.filter(element => {
    //                   return element.dictKey.indexOf(this.boundValueSearchInput) > -1 || element.dictKeyName.indexOf(this.boundValueSearchInput) > -1;
    //               })
    //             : this.dicts;
    // }

    // // 多选框类型---下拉框选择改变处理
    // private handleBoundValueChange(checkedData): void {
    //     let i = 0;
    //     this.boundValueShow = '';
    //     this.fundDynamicGroupBounds.boundValueNames = [];
    //     checkedData.forEach(element => {
    //         this.dictsTemp.forEach(item => {
    //             if (element === item.dictKey) {
    //                 this.boundValueShow = this.boundValueShow + element + '(' + item.dictKeyName + ')';
    //                 this.fundDynamicGroupBounds.boundValueNames.push(item.dictKeyName);
    //             }
    //         });
    //         i++;
    //         if (i < checkedData.length) {
    //             this.boundValueShow = this.boundValueShow + ',';
    //         }
    //     });
    // }

    // 点击节点
    async handleBoundNodeClick(keys: any) {
        if (!keys.configId) {
            return;
        }
        // 默认值||点击行的范围配置类型
        this.investGroupTypeReal = this.investGroupType || keys.groupType;
        await this.handleInvestGroupTypeReal();

        this.webShowType = '';
        this.compareTypes = [];
        this.currentConfigSeparateValid = false; // 是否支持同申报

        if (this.currentConfigId === keys.configId) {
            // 第二次点击
            this.currentConfigId = '';

            this.originalRenderTree = JSON.parse(JSON.stringify(this.originalRenderTree)); //
            this.fundDynamicGroupBounds = {
                sqlSpliceType: '0',
            };
            this.sqlSpliceType =
                this.fundDynamicGroupBounds.sqlSpliceType + ' ' + this.Dict.conditionRelation[this.fundDynamicGroupBounds.sqlSpliceType];

            this.handleOriginalBoundConfig('-1');
        } else {
            // 第一次点击
            this.currentConfigId = keys.configId;
            let orgBound = this.originalConfigList.find(item => String(item.configId) === keys.configId);
            this.fundDynamicGroupBounds = JSON.parse(JSON.stringify(orgBound));

            this.sqlSpliceType = orgBound.sqlSpliceType + ' ' + this.Dict.conditionRelation[orgBound.sqlSpliceType];
            if (orgBound.boundGroupValid) {
                // 组配置
                this.webShowType = '';
                this.compareTypes = [];
                this.currentConfigSeparateValid = false;
            } else {
                let orgCfg = this.originList.find(item => item.boundCode === orgBound.boundCode);
                this.spliceMethods = orgCfg.spliceMethods;

                this.webShowType = orgCfg.webShowType;
                this.compareTypes = orgCfg.webDirections || [];
                this.currentConfigSeparateValid = orgCfg.separateValid;

                // 如果为下拉列表时 需要加载下拉列表数据
                if (this.webShowType === '0') {
                    this.handleShowWebShow(orgBound.boundCode).then(() => {
                        this.dictsTempFilterNumKey++;
                        // this.handleBoundValueChange(this.fundDynamicGroupBounds.boundValues);
                    });
                } else if (this.webShowType === '4') {
                    this.handleShowWebShow(orgBound.boundCode).then(() => {
                        this.boundValueSelect = this.fundDynamicGroupBounds.boundValues.toString();
                    });
                } else if (this.webShowType === '1') {
                    // this.form.boundValueNum = parseInt(this.fundDynamicGroupBounds.boundValueNames.toString());
                    if (this.fundDynamicGroupBounds.boundValueNames && this.fundDynamicGroupBounds.boundValueNames.length > 0) {
                        this.form.boundValueNum = parseInt(this.fundDynamicGroupBounds.boundValueNames.toString());
                    } else if (this.fundDynamicGroupBounds.boundValues && this.fundDynamicGroupBounds.boundValues.length > 0) {
                        this.form.boundValueNum = parseInt(this.fundDynamicGroupBounds.boundValues.toString());
                    }
                } else if (this.webShowType === '5') {
                    if (this.fundDynamicGroupBounds.boundValueNames && this.fundDynamicGroupBounds.boundValueNames.length > 0) {
                        this.form.boundValueNum = parseFloat(this.fundDynamicGroupBounds.boundValueNames.toString());
                    } else if (this.fundDynamicGroupBounds.boundValues && this.fundDynamicGroupBounds.boundValues.length > 0) {
                        this.form.boundValueNum = parseFloat(this.fundDynamicGroupBounds.boundValues.toString());
                    }
                } else if (this.webShowType === '2') {
                    this.rightTranData = this.fundDynamicGroupBounds.boundValues.map((dictKey, i) => ({
                        dictKey,
                        dictKeyName: this.fundDynamicGroupBounds.boundValueNames[i],
                    }));
                    this.transValuesShow = this.fundDynamicGroupBounds.boundValueNames.toString();
                } else if (this.webShowType === '3') {
                    this.boundValueDate = this.fundDynamicGroupBounds.boundValueNames.toString();
                }
            }
        }
    }

    // 处理范围属性的添加
    private handleAddConfig(): void {
        // console.log(this.configId);
        let dynamicOriginalConfigPO: dynamicDataReqVO = JSON.parse(JSON.stringify(this.fundDynamicGroupBounds));
        let isAdopt = this.verifySingleConfig(dynamicOriginalConfigPO);
        if (!isAdopt) {
            return;
        }
        let orgBound = this.originalConfigList.find(item => String(item.configId) === this.currentConfigId) || { boundGroupValid: true };
        let parentId = 0;
        if (this.currentConfigId && orgBound.boundGroupValid) {
            parentId = Number(this.currentConfigId);
        }
        dynamicOriginalConfigPO.configId = this.configId;
        if (this.startParentId && this.startParentId >= parentId) {
            dynamicOriginalConfigPO.parentId = this.startParentId;
        } else {
            dynamicOriginalConfigPO.parentId = parentId;
        }
        // this.showBoundExtend = this.isShowBoundExtend(dynamicOriginalConfigPO.boundCode);
        this.originalConfigList.push(dynamicOriginalConfigPO);
        // 设置configId递增
        this.configId += 1;
        //

        this.originalRenderTree = this.handleRenderTree(this.originalConfigList);
        if (this.currentConfigId && orgBound.boundGroupValid) {
            this.currentOpenTreeNode.push(this.currentConfigId);
        }
        this.handleOriginalBoundConfig('-1'); // -1相当于是重新进行清空操作
        // 回调函数
        this.onHandleSettingValue(this.originalConfigList);
    }

    // 更新配置项
    private handleUpdateConfig(): void {
        if (!this.currentConfigId) {
            this.yh_message_warn('请选择节点进行操作');
            return;
        }
        let index;
        let orgBound = this.originalConfigList.find((item, i) => {
            index = i;
            return String(item.configId) === this.currentConfigId;
        });
        if (orgBound.boundGroupValid) {
            this.yh_message_error('组节点不允许进行修改');
            return;
        }
        // 证券范围信息
        let dynamicOriginalBoundConfigPO = JSON.parse(JSON.stringify(this.fundDynamicGroupBounds));
        let isAdopt = this.verifySingleConfig(dynamicOriginalBoundConfigPO);
        if (!isAdopt) {
            return;
        }
        // 设置 configId 和 parentId
        dynamicOriginalBoundConfigPO.configId = orgBound.configId;
        dynamicOriginalBoundConfigPO.parentId = orgBound.parentId;
        // this.showBoundExtend = this.isShowBoundExtend(dynamicOriginalBoundConfigPO.boundCode);
        this.originalConfigList.splice(index, 1, dynamicOriginalBoundConfigPO);
        this.originalRenderTree = this.handleRenderTree(this.originalConfigList);
        // console.log(this.originalRenderTree, 'originalRenderTree');
        // 回调函数
        this.onHandleSettingValue(this.originalConfigList);
    }

    // 删除证券范围配置
    private handleDeleteConfig(): void {
        if (!this.currentConfigId) {
            this.yh_message_warn('请选择节点进行删除');
            return;
        }
        // if (this.originalRenderTree.length === 1) {
        //     this.yh_message_warn('删除全部配置将会是无效操作,如有必要,可直接该删除账户组');
        // }
        let newList = [];
        newList.push(Number(this.currentConfigId));
        this.handleSearchConfigId(this.originalConfigList, Number(this.currentConfigId), newList);
        for (let i = 0; i < this.originalConfigList.length; i++) {
            if (newList.includes(this.originalConfigList[i].configId)) {
                this.originalConfigList.splice(i, 1);
                i--;
            }
        }
        this.originalRenderTree = this.handleRenderTree(this.originalConfigList);
        this.currentConfigId = ''; //

        // 回调函数
        this.onHandleSettingValue(this.originalConfigList);
    }

    // 查找 configId 下的范围  用于删除节点
    private handleSearchConfigId(orginalList: any, configId: number, newList: any[]) {
        for (let i = 0; i < orginalList.length; i++) {
            if (orginalList[i].parentId === configId) {
                if (orginalList.map(item => item.parentId).includes(orginalList[i].configId)) {
                    this.handleSearchConfigId(orginalList, orginalList[i].configId, newList);
                }
                newList.push(orginalList[i].configId);
            }
        }
    }

    // 设置回调
    private onHandleSettingValue(list) {
        if (this.operateType === 'look') {
            return;
        }
        let settingValue = JSON.parse(JSON.stringify(list));
        for (let i = 0; i < settingValue.length; i++) {
            // 父节点设置
            if (settingValue[i].boundGroupValid) {
                settingValue[i].boundCode = '';
                settingValue[i].compareType = '4';
            }
        }
        this.settingValue(settingValue); // 调用父组件方法
    }

    // 校验配置
    private async handleCheckConfig(): Promise<void> {
        this.StockType = await DictionConstUtil.FNStockType();
        this.MarketType = await DictionConstUtil.FNMarketType();
        this.StockTypePojo = DictionConstUtil.ListToPojo(await DictionConstUtil.FNStockType());
        this.MarketTypePojo = DictionConstUtil.ListToPojo(await DictionConstUtil.FNMarketType());
        this.isVerifyStockBoundonfig = !this.isVerifyStockBoundonfig;
        if (this.isVerifyStockBoundonfig) {
            this.getStockList(null, this.originalConfigList);
        }
    }

    // 将集合创建成树
    private handleRenderTree(stockBound) {
        let stockConfig = JSON.parse(JSON.stringify(stockBound));
        let treeList = this.createTreeList(stockConfig, this.startParentId || 0);
        // treeList.forEach(item => {
        //     item.showBoundExtend = this.isShowBoundExtend(item.boundCode);
        // });

        this.setNodeShowBound(treeList);
        let value = this.handleRenderListTree(treeList);
        return value;
    }

    // 遍历树节点设置小齿轮图标
    setNodeShowBound(treeData: any) {
        treeData.forEach(item => {
            item.showBoundExtend = this.isShowBoundExtend(item.boundCode);
            if (item.children && item.children.length) {
                this.setNodeShowBound(item.children);
            }
        });
    }

    // 列表组装成树形集合
    private createTreeList(orginalList, configId): any {
        let newList = [];

        for (let i = 0; i < orginalList.length; i++) {
            if (orginalList[i].parentId === configId) {
                if (orginalList.find(item => item.parentId === orginalList[i].configId)) {
                    orginalList[i].children = this.createTreeList(orginalList, orginalList[i].configId);
                }
                newList.push(orginalList[i]);
            }
        }
        return newList;
    }

    // 范围配置 树形集合转化成渲染树(显示树)
    private handleRenderListTree(treeList: any) {
        return treeList.map(item => {
            // 处理节点名称
            let sqlSpliceTypeName = this.conditionRelation[item.sqlSpliceType];
            let boundName = '';
            let compareTypeName = '';
            let boundValueNames = '';
            // 组配置
            if (item.boundGroupValid) {
                boundName = '';
                compareTypeName = '';
                boundValueNames = '';
            } else if (item.separateValid) {
                let orgCfg = this.boundList.find(item1 => item1.boundCode === item.boundCode);
                boundName = orgCfg.boundName;
                compareTypeName = this.CompareDirection[item.compareType];
                boundValueNames = '单独控制';
            } else {
                let orgCfg = this.boundList.find(item1 => item1.boundCode === item.boundCode);
                boundName = orgCfg.boundName;
                compareTypeName = this.CompareDirection[item.compareType];
                if (item.boundValueNames && item.boundValueNames.length > 0) {
                    boundValueNames = item.boundValueNames;
                } else if (item.boundValues && item.boundValues.length > 0) {
                    boundValueNames = item.boundValues;
                } else {
                    boundValueNames = '';
                }
            }
            if (item.spliceMethod == '1') {
                // 按产品代码控制
                boundValueNames += '【控制维度:按产品代码控制】';
            } else if (item.spliceMethod == '2') {
                // 按冻结代码控制
                boundValueNames += '【控制维度:按冻结代码控制】';
            } else if (item.spliceMethod == '3') {
                // 按配售代码控制
                boundValueNames += '【控制维度:按配售代码控制】';
            }
            let title = sqlSpliceTypeName + ' ' + boundName + ' ' + compareTypeName + ' ' + boundValueNames;
            // 渲染时记录所有的父级节点
            if (item.boundGroupValid) {
                this.allParentTreeNodes.push(String(item.configId));
            }
            // 存在子节点
            if (item.children && item.children.length > 0) {
                item.children = this.handleRenderListTree(item.children);
            }
            return Object.assign(item, {
                label: title,
                configId: String(item.configId),
            });
        });
    }

    // 校验配置的范围信息
    private verifySingleConfig(editRow: any): boolean {
        // 添加空组时
        if (editRow.boundCode === '-1') {
            return true;
        } else if (editRow.separateValid === true) {
            // if (this.spliceMethods.includes('1') && !editRow.spliceMethod) {
            //     this.yh_message_warn('请选择控制维度');
            //     return false;
            // }
            // else {
            return true;
            // }
        } else {
            if (!editRow.boundValues || editRow.boundValues.length === 0) {
                this.yh_message_warn('未配置范围属性的值');
                return false;
            }
            if (!editRow.compareType) {
                this.yh_message_warn('未配置比较方向');
                return false;
            }
            // if (this.spliceMethods.includes('1') && !editRow.spliceMethod) {
            //     this.yh_message_warn('请选择控制维度');
            //     return false;
            // }
            return true;
        }
    }

    // sql拼接字符串
    private handleSqlSpliceType(value: string): void {
        this.fundDynamicGroupBounds.sqlSpliceType = value.split(' ')[0];
    }

    // 计数器类型
    private handleBoundValueChange15(num: number): void {
        this.webShowType == '1' && (num = Math.round(num));
        this.fundDynamicGroupBounds.boundValues = [];
        this.fundDynamicGroupBounds.boundValueNames = [];
        this.fundDynamicGroupBounds.boundValues.push(num.toString());
        this.fundDynamicGroupBounds.boundValueNames.push(num.toString());
    }

    // 日期类型
    @Watch('boundValueDate')
    handleBoundValueChange3() {
        const date = this.boundValueDate;
        this.fundDynamicGroupBounds.boundValues = [];
        this.fundDynamicGroupBounds.boundValueNames = [];
        this.fundDynamicGroupBounds.boundValues.push(date);
        this.fundDynamicGroupBounds.boundValueNames.push(date);
    }

    // 选择器类型
    private handleBoundValueChange4(value: any): void {
        this.fundDynamicGroupBounds.boundValues = [];
        this.fundDynamicGroupBounds.boundValueNames = [];
        this.fundDynamicGroupBounds.boundValues.push(value);
        this.dictsTemp.forEach(ele => {
            if (ele.dictKey === value) {
                this.fundDynamicGroupBounds.boundValueNames.push(ele.dictKeyName);
                return;
            }
        });
    }

    // 点击单独控制时触发该事件
    private handleSeparateValidCheck(checked): void {
        this.fundDynamicGroupBounds.separateValid = checked;
        if (checked) {
            this.fundDynamicGroupBounds.compareType = '4';
            this.fundDynamicGroupBounds.boundValues = [];
            this.fundDynamicGroupBounds.boundValueNames = [];
        }
    }

    // 大数据穿梭框--弹框
    private selectKeyValue2Click(): void {
        this.editLargeDataDialog = this.editLargeDataDialog.getAddDialog('');
        // this.transValuesShow = this.fundDynamicGroupBounds.boundValueNames.toString();
        this.transKey++;
        this.rightTranData = this.getRightTranData(this.fundDynamicGroupBounds);
        // this.$axios
        //     .post('/original/showBigData', {
        //         boundCode: this.fundDynamicGroupBounds.boundCode,
        //         categorys: [],
        //         filterCodes: this.fundDynamicGroupBounds.boundValues,
        //         keyName: '',
        //         leftSearchPrecision: false,
        //         paging: { currentPage: 1, pageSize: 20 },
        //     })
        //     .then((res: any) => {
        //         this.leftTranData = res.list;
        //         this.rightTranData = this.getRightTranData(this.fundDynamicGroupBounds);
        //     });
    }

    // 获取穿梭框右侧数据
    private getRightTranData(values): any {
        let arr: any[] = [];
        for (let i = 0; i < values.boundValues.length; i++) {
            arr.push({ dictKey: values.boundValues[i], dictKeyName: values.boundValueNames[i] });
        }
        return arr;
    }

    // 大数据弹窗确认
    private editLargeDataDialogConfirm(): void {
        const rightData = (this.$refs.trans as any).getRightAllData();
        this.fundDynamicGroupBounds.boundValues = XEUtils.map(rightData, item => item.dictKey);
        this.fundDynamicGroupBounds.boundValueNames = XEUtils.map(rightData, item => item.dictKeyName);
        this.transValuesShow = this.fundDynamicGroupBounds.boundValueNames.toString();
        this.editLargeDataDialogClosed();
    }

    // 关闭弹窗
    private editLargeDataDialogClosed(): void {
        this.editLargeDataDialog.visible = false;
    }

    private stockSearchLoading: boolean = false;
    // 校验数据
    private stockSearchDataSource: any[] = [];
    private StockType: any[] = [];
    private MarketType: any[] = [];
    private StockTypePojo: any = {};
    private MarketTypePojo: any = {};
    private paging: pages = {
        total: 0,
        currentPage: 1,
        pageSize: 20,
    };
    // 校验搜索
    private handleClick() {
        //  this.StockType = await DictionConstUtil.FNStockType();
        // this.MarketType = await DictionConstUtil.FNMarketType();
        // this.StockTypePojo = DictionConstUtil.ListToPojo(await DictionConstUtil.FNStockType());
        // this.MarketTypePojo = DictionConstUtil.ListToPojo(await DictionConstUtil.FNMarketType());
        // this.getStockList(null, this.originalConfigList);
        this.$emit('showSearchStockModal', true);
    }
    /**
     * 获取证券列表
     */
    private getStockList(stockCode, stockBounds) {
        this.stockSearchLoading = true;
        this.$axios
            .post('/dynamic/verify/stockBound/config', {
                stockCode: stockCode,
                boundConfigs: stockBounds,
                paging: this.paging,
            })
            .then((response: any) => {
                this.paging.total = response.total;
                response.list.forEach(item => (item.key = item.stockCode));
                this.stockSearchDataSource = response.list;
                this.stockSearchLoading = false;
            })
            .catch(() => {
                this.stockSearchLoading = false;
            });
    }

    // 第五类数据处理
    private async handeBoundExtend(item, node) {
        console.log(item, node);
        this.FiveData = item;

        if (item.showBoundExtend) {
            await this.handleShowWebShow5(item.boundCode);
            await this.handleShowCompare(item.boundCode);
        }
        setTimeout(() => {
            this.showBoundExtendModel = true;
        }, 500);
        this.currentBoundExtend = item;
    }

    /**
     * 是否展示范围额外配置信息
     */
    private isShowBoundExtend(boundCode) {
        this.resolveKey = '';
        if (boundCode === undefined || boundCode === '' || boundCode === '-1') {
            return false;
        } else {
            let data = this.boundList.filter(item => item.boundCode === boundCode)[0] || {};
            if (!data.resolveKey) {
                return;
            }
            if (data.resolveKey.indexOf('|') !== '-1' && data.resolveKey.split('|')[0] == '6') {
                this.resolveKey = data.resolveKey.split('|')[0];
            } else if (['5', '6'].includes(data.resolveKey)) {
                // this.resolveKey = '5';
                this.resolveKey = data.resolveKey;
            }
            return this.resolveKey === '5' || this.resolveKey === '6';
            // return (this.boundList.filter(item => item.boundCode === boundCode)[0] || {}).resolveKey === '5';        }
        }
    }

    /**
     * 范围5 额外配置回调
     * @param {*} action 行为
     * @param {*} configId  范围配置分支id
     * @param {*} value 范围额外配置 boundExtend
     */
    private handleBoundExtendModel({ action, configId, value }): void {
        if (action === 'confirm') {
            this.originalConfigList.forEach(item => {
                if (item.boundCode === this.currentBoundExtend.boundCode && parseInt(item.configId) === parseInt(configId)) {
                    item.boundExtend = value;
                    return;
                }
            });
            this.showBoundExtendModel = false;
            this.currentBoundExtend = {};
            this.originalRenderTree = this.handleRenderTree(this.originalConfigList);
            // this.currentOpenTreeNode = this.allParentTreeNodes;
            // //回调函数
            this.onHandleSettingValue(this.originalConfigList);
        } else if (action === 'cancel') {
            this.showBoundExtendModel = false;
        }
    }

    private selectWebSqlValues5: any[] = []; // 下拉列表可选值
    private boundConfigExtends: any[] = []; // 下拉列表可选值

    /**
     * 根据证券范围配置编号获取范围模板5 展示SQL
     */
    private handleShowWebShow5(boundCode) {
        this.$axios.get('/original/showSelect5/' + boundCode).then(
            (res: any) => {
                if (res) {
                    // res.values.forEach((item) => item.key = item.dictKey)
                    this.selectWebSqlValues5 = res;
                }
            },
            () => {
                this.selectWebSqlValues5 = [];
            }
        );
    }
    /**
     * 根据证券范围配置编号获取范围模板5比较反向
     */
    private handleShowCompare(boundCode) {
        this.$axios.get('/original/showCompare/' + boundCode).then(
            (res: any) => {
                if (res) {
                    // res.values.forEach((item) => item.key = item.dictKey)
                    this.boundConfigExtends = res;
                }
            },
            () => {
                this.boundConfigExtends = [];
            }
        );
    }

    // 下拉多选框
    private customSelectReturn(value: any): void {
        let names = [];
        this.fundDynamicGroupBounds.boundValues = value;
        value.forEach(item => {
            const obj = this.dicts.find(ele => ele.dictKey == item);
            if (obj) {
                names.push(obj.dictKeyName);
            }
        });
        this.fundDynamicGroupBounds.boundValueNames = names;
    }

    // 分页
    private handleCurrentChange(curPage: number) {
        this.paging.currentPage = curPage;
        this.getStockList(null, this.originalConfigList);
    }
}
</script>
<style lang="scss" scoped>
.risk-bound-cfg {
    display: flex;
    border: 1px solid #cacaca;
    border-radius: 5px;
    background-color: #ebebeb;
    padding: 2px 6px;
}
.risk-bound-tree {
    border: 1px solid #cacaca;
    border-radius: 5px;
    margin-top: 5px;
    background-color: #f5f5f5;
    padding-left: 6px;
    .risk-bound-tree-show {
        height: calc(100% - 48px);
        margin-top: 5px;
    }
}
.my-dropdown {
    height: 160px;
    overflow: auto;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    .accountControlValue-search {
        width: 98%;
        height: 30px;
        margin: 2px 5px;
        .input-container {
            display: inline-block;
            width: 90%;
        }
    }
    /deep/ .el-checkbox {
        display: block;
        margin-left: 5px;
        line-height: 10px;
    }
}
/deep/ .el-button + .el-button {
    margin: 0px;
}
/deep/ .el-tree {
    width: fit-content;
    .el-tree-node.is-current > .el-tree-node__content {
        background: transparent;
        & > span:last-child {
            background: #bae7ff;
            color: #415159;
        }
    }
    .el-tree-node__content {
        background: transparent;
        &:hover {
            & > span:last-child {
                background: #e6f7ff;
                color: #415159;
            }
        }
    }
}
/deep/ .el-tree__empty-text {
    position: static;
}
/deep/ .el-button--mini,
.el-button--mini.is-round {
    padding: 6px 15px;
}
/deep/ .el-dialog .el-dialog__body {
    max-height: 100vh;
    height: 460px;
}
/deep/ .editDialog .el-dialog .el-dialog__body {
    height: 460px;
}

/deep/ .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
/deep/ .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
    border-color: #62b4f7;
}
.el-pagination {
    padding: 6px 6px 6px 0 !important;
}
</style>
